﻿<template>
    <el-input :model-value="nameVal" readonly :disabled="disabled" v-bind="$attrs">
        <template #append v-if="!disabled">
            <el-button @click="onBtnClick">...</el-button>
        </template>
    </el-input>
    <!-- <my-select-win 
        ref="selectWin" 
        v-bind="selectCfg.props" 
        :title="selectCfg.title" 
        :tbname="selectCfg.tbname"
        :fields="selectCfg.fields" 
        :excludeSearch="selectCfg.excludeSearch" 
        v-model:search="selectCfg.search" 
        clearable
        @clear="onClear" 
        @selected="handleSel"></my-select-win> -->
</template>

<script>

export default {
    name: "MySelectInput",
    emits: ["update:modelValue", "update:nameValue", "selected2"],
    props: {
        modelValue: [String, Number, Array],
        nameValue: String,
        valueField: String,
        labelField: String,
        selectCfg: Object,
        clearable:Boolean,

        //一次可以更新多条记录
        multi: Boolean,

        formData: Object,
        pformSearch: Object, //父亲form传来的过滤条件//跟随formData一起变化
        disabled: {
            type: Boolean,
            default: false,
        },
    },

    data() {
        return {
            nameVal: String,
        };
    },
    created() {
        this.nameVal = this.nameValue;
        if (this.formData && this.labelField) {
            this.nameVal = this.formData[this.labelField];
            let key = "formData." + this.labelField;
            this.$watch(key, (newVal, oldVal) => {
                this.nameVal = newVal;
            }, { deep: true });
        }
    },
    methods: {
        proceParenFormSearch() {
            if (this.pformSearch && this.formData) {
                let nSearch = { ...this.selectCfg.search };
                Object.keys(this.pformSearch).map((p) => {
                    let v = this.pformSearch[p];
                    if (v) {
                        nSearch[p] = this.formData[v];
                    }
                });

                this.selectCfg.search = nSearch;
            }
        },
        handleSel(items) {
            if (items && items.length > 0) {
                let item = items[0];
                var val = item[this.valueField || "ID"];
                this.$emit("update:modelValue", val);
                this.doSel(item);
            }
        },
        onBtnClick() {
            if (this.selectCfg.click) {
                this.selectCfg.click.apply(this);
            } else {
                this.proceParenFormSearch();
                //this.$refs.selectWin.open(this.multi);
                let cfg = { ...this.selectCfg, clearable: true };
                this.$server.dlg.select(cfg, this.multi).then(items => {
                    if(items.length==0){
                        this.onClear();
                    }else{
                        this.handleSel(items);
                    }
                })
            }
        },
        onClear() {
            if (this.labelField) {
                this.nameVal = "";
            }
            if (this.valueField) {
                this.$emit("update:modelValue", "");
            }
            this.doSel({});
        },
        doSel(item) {
            if (this.selectCfg.srcFields && this.selectCfg.destFields && this.formData) {
                let src = this.selectCfg.srcFields.split(",");
                let dst = this.selectCfg.destFields.split(",");
                for (let ix = 0; ix < src.length; ix++) {
                    let pkey = dst[ix];
                    this.formData[pkey] = item[src[ix]] ?? null;
                }
                if (this.formData && this.labelField) {
                    this.nameVal = this.formData[this.labelField] ?? null;
                }
            }
            this.$emit("selected2", item, this);
        },
    },

    watch: {
        modelValue() {
            if (this.formData && this.labelField) {
                this.nameVal = this.formData[this.labelField];
            }
        },
        nameVal(newValue) {
            this.$emit("update:nameValue", newValue);
        },
        nameValue(newValue) {
            this.nameVal = newValue;
        },
    },
};
</script>